<template>
	<view class="conent">
		<view class="conent_box">
			<view class="address" v-if="addressList.length>0">
				<u-list @scrolltolower="scrolltolower">
					<u-list-item v-for="(item,index) in addressList" :key="index">
						<view class="addressItem" :style="{background:item.defaultFlag?'#8aefe9':''}">
							<view>
								<u-row>
									<u-col span="4">
										<u-text text="收货人" size="14" align="left"></u-text>
									</u-col>
									<u-col span="8">
										<u-text :text="item.name" size="14" bold align="right"></u-text>
									</u-col>
								</u-row>
								<u-row customStyle="margin-top:20rpx;">
									<u-col span="4">
										<u-text text="手机号码" size="14" align="left"></u-text>
									</u-col>
									<u-col span="8">
										<u-text :text="item.phoneNumber" size="14" bold align="right"></u-text>
									</u-col>
								</u-row>
								<u-row customStyle="margin-top:20rpx;">
									<u-col span="4">
										<u-text text="地址" size="14" align="left"></u-text>
									</u-col>
									<u-col span="8">
										<u-text :text="item.address" size="14" bold align="right"
											customStyle="text-align:right;"></u-text>
									</u-col>
								</u-row>
								<u-row customStyle="margin-top:20rpx;">
									<u-col span="4">
										<u-text text="详细街道" size="14" align="left"></u-text>
									</u-col>
									<u-col span="8">
										<u-text :text="item.detailAddress" size="14" bold align="right"
											customStyle="text-align:right;"></u-text>
									</u-col>
								</u-row>
								<u-row customStyle="margin-top:20rpx;">
									<u-col span="6">
										<u-text text="是否为默认地址" size="14" align="left"></u-text>
									</u-col>
									<u-col span="6">
										<up-switch :activeValue="1" :inactiveValue="0" v-model="item.defaultFlag"
											activeColor="#07BFA5" disabled customStyle="float:right;"></up-switch>
									</u-col>
								</u-row>
							</view>
							<u-row customStyle="margin-top:20rpx;">
								<u-col span="6">
									<u-button text="修改" icon="edit-pen" iconColor="#fff" color="#07BFA5"
										customStyle="width:80%;border-radius:10rpx;"
										@click="updateAddress(item)"></u-button>
								</u-col>
								<u-col span="6">
									<u-button text="删除" icon="close-circle" iconColor="#fff" color="#999999"
										customStyle="width:80%;border-radius:10rpx;"
										@click="deleteAddress(item.id,index)"></u-button>
								</u-col>
							</u-row>
						</view>
					</u-list-item>
				</u-list>
			</view>
			<view class="addressNull" v-else>
				<view
					style="width: 40px;height: 40px;border-radius: 50%; background: #07BFA5; position: absolute;top: 160px;left: 45%;">
				</view>
				<u--image src="https://fengfujiafile.oss-cn-hangzhou.aliyuncs.com/adopt/static/page/address.png" width="160" height="100"
					customStyle="margin:auto;"></u--image>
				<u--text text="暂无可用地址" align="center" color="#8991A4"></u--text>
			</view>
		</view>
		<u-button text="添加收货地址" icon="plus" iconColor="#fff" color="#07BFA5"
			customStyle="width:90%;border-radius:16rpx;position:fixed;left:5%; bottom:20rpx" @click="append"></u-button>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		watch
	} from 'vue'
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app";
	import {
		list,
		addressesDelete
	} from "@/api/pages/address.js"
	import router from '@/api/router';
	const addressList = ref([])
	const addressFrom = ref({
		pageNo: 1,
		pageSize: 10
	})
	// onMounted(() => {
	// 	getaddressList()
	// })
	onShow(() => {
		addressList.value = []
		addressFrom.value.pageNo = 1
		getAddressList(addressFrom.value)
	})
	const append = () => {
		console.log("添加地址");
		router.navigateTo({
			url: "/pageD/feature/add"
		})
	}
	const updateAddress = (item) => {
		console.log(item);
		router.navigateTo({
			url: "/pageD/feature/add?address=" + JSON.stringify({
				address: item.address,
				defaultFlag: item.defaultFlag,
				detailAddress: item.detailAddress,
				id: item.id,
				name: item.name,
				phoneNumber: item.phoneNumber,
				userId: item.userId
			})
		})
	}
	const deleteAddress = (id, index) => {
		console.log(id);
		uni.showModal({
			title: '提示',
			content: '你确定要删除该地址吗',
			success: function(res) {
				if (res.confirm) {
					addressDelete(id, index)
				} else if (res.cancel) {
					console.log('取消');
				}
			}
		})
	}
	const scrolltolower = () => {
		addressFrom.value.pageNo++
		getAddressList(addressFrom.value)
	}
	const getAddressList = async (form) => {
		const res = await list(form).then()
		addressList.value = addressList.value ? addressList.value.concat(res.result.records) : res.result
			.records
	}
	const addressDelete = async (id, index) => {
		const res = await addressesDelete({
			addressId: id
		}).then((res) => {
			uni.showToast({
				title: '删除成功',
				duration: 2000
			});
			addressList.value.splice(index, 1);
		})
	}
</script>

<style lang="scss" scoped>
	body {
		background: #F8F8F8;
	}

	.conent_box {
		background: #F8F8F8;
		margin-top: 0;

		.address {

			:deep(.u-number-box__minus),
			:deep(.u-number-box__plus) {
				border-radius: 50%;
			}
		}

		.address {
			padding-bottom: 100rpx;
		}

		.addressItem,
		.addressNull {
			margin: 10rpx;
			padding: 40rpx;
			background-color: #fff;
			box-shadow: 2px 2px 2px rgba(0, 0, 0, .3);
			border-radius: 20rpx;
		}

		.addressNull {
			position: relative;
			padding: 200rpx;
		}

	}
</style>